<template>
	<div class="screen6-module2-content" ref="container">
		<div class="item-group" :style="{top:groupTop+'px'}"  ref="group">
			<!-- ################## -->
			<div class="item-block" v-for="(item,index) in dataSource" :key="index" :ref="'itemblock'+index">
				<div class="item-content">
					<div class="item-content-row1">
						<div class="project-no">{{item.warehouseCode}}</div>
						<div class="project-name no-wrap">{{item.warehouseName}}</div>
					</div>
					<div class="item-content-row2">
						<div class="label">交期：</div>
						<div class="content no-wrap">{{item.dateStr}}</div>
					</div>
					<div class="item-content-row3">
						<div class="label">状态：</div>
						<div class="content no-wrap">{{item.warehouseState}}</div>
					</div>
					<div class="item-content-row4">
						<div class="rate-line">
							<div class="rate-line-inner" :style="{width:item.rate}"></div>
						</div>
						<div class="rate-value">{{item.rate}}</div>
					</div>
				</div>
				<div :class="[index===activeIndex?'item-border-active':'item-border']">
					<template v-if="index!==activeIndex">
						<div class="corner coner-top-left"></div>
						<div class="corner coner-top-right"></div>
						<div class="corner coner-bottom-left"></div>
						<div class="corner coner-bottom-right"></div>
					</template>
				</div>
			</div>
			<!-- ################## -->
		</div>
	</div>
</template>

<script setup>
import { ref, inject, toRefs, getCurrentInstance, nextTick, watch, onMounted, onBeforeUnmount } from 'vue';
import { eleResize } from '@/assets/js/utils'

const instance = getCurrentInstance()
let $frame = null;

const $config = inject('$config')
const props = defineProps({
	dataSource:{
		type:Array,
		default:function(){
			return []
		}
	},
	activeIndex:{
		type:Number,
		default:0
	}
})
const {activeIndex} = toRefs(props)

const groupTop = ref(0)

const drawAnimate = function(){
	nextTick(()=>{
		let containerHeight = instance.refs.container.clientHeight;
		let groupHeight = instance.refs.group.clientHeight;
		if (groupHeight>containerHeight) {
			let $block = instance.refs['itemblock'+activeIndex.value]
			if ($block) {
				let minTop = containerHeight - groupHeight;
				let toTop = - $block.offsetTop
				if (toTop > 0) {
					toTop = 0
				} else if (toTop < minTop) {
					toTop = minTop
				}
				groupTop.value = toTop
			}
		}
	})
}

watch(activeIndex,(newVal,oldVal)=>{
	if (newVal !== oldVal) {
		drawAnimate()
	}
})

/* 创建div宽高变化监听器 */
const createEleResize = function(){
	$frame =  instance.refs.container;
	eleResize.on($frame, drawAnimate);
}

/* div宽高变化事件移除 */
const destroyEleResize=function(){
	try{
		eleResize.off($frame, drawAnimate);
	}catch(e){
		//TODO handle the exception
	}
}

onMounted(()=>{
	createEleResize()
})

onBeforeUnmount(()=>{
	destroyEleResize();
})

defineExpose({drawAnimate})
</script>

<style scoped lang="scss">
.screen6-module2-content{
	height: 100%;
	overflow: hidden;
	position: relative;
	.item-group{
		position: absolute;
		left: 0;
		width: 100%;
		transition:top 500ms linear;
	}
	.item-block{
		position: relative;
		margin-bottom: .14em;
		.item-content{
			position: relative;
			background-color: transparent;
			z-index: 2;
			.item-content-row1,.item-content-row2,.item-content-row3,.item-content-row4{
				padding-left: .4em;
				padding-right: .16em;
			}
			.item-content-row2,.item-content-row3{
				display: flex;
				align-items: center;
				color: #ffffff;
				.label{
					font-size: .26em;
				}
				.content{
					font-size: .34em;
					font-size: bold;
				}
			}
			.item-content-row1{
				display: flex;
				align-items: flex-end;
				padding-top: .4em;
				.project-no{
					color: #00CCFF;
					font-size: .5em;
					font-weight: 400;
				}
				.project-name{
					color: #ffffff;
					font-size: .3em;
					margin-left: .3em;
					padding-bottom: .2em;
				}
			}
			.item-content-row2{
				padding-top: .3em;
			}
			.item-content-row3{
				padding-top: .2em;
			}
			.item-content-row4{
				padding-top: .2em;
				display: flex;
				align-items: center;
				.rate-line{
					height: .2em;
					width: 100%;
					background-color: #ffffff;
					border-radius: .1em;
					overflow: hidden;
					.rate-line-inner{
						height: 100%;
						background-color: #67C23A;
					}
				}
				.rate-value{
					flex-shrink: 0;
					color: #ffffff;
					font-size: .34em;
					padding-left: .2em;
				}
			}
			padding-bottom: .4em;
		}
		.item-border,.item-border-active{
			position: absolute;
			box-sizing: border-box;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			box-shadow: 1px 1px 20px 7px rgba(0, 204, 255, 0.35) inset;
			z-index: 1;
		}
		.item-border-active{
			border: 2px solid #5CB5F6;
		}
		.item-border{
			.corner{
				$cornerSize:.28em;
				position: absolute;
				border-style: solid;
				border-color: #5CB5F6;
				width: $cornerSize;
				height: $cornerSize;
				z-index: 1;
			}
			.coner-top-left{
				top: 0;
				left: 0;
				border-width: 2px 0 0 2px;
			}
			.coner-top-right{
				top: 0;
				right: 0;
				border-width: 2px 2px 0 0;
			}
			.coner-bottom-left{
				bottom: 0;
				left: 0;
				border-width: 0 0 2px 2px;
			}
			.coner-bottom-right{
				bottom: 0;
				right: 0;
				border-width: 0 2px 2px 0;
			}
		}
		&:last-child{
			margin-bottom: 0;
		}
	}
}
</style>